<template>
  <div><!--菜单中通过submenu组件可以生成二级菜单,mode属性可以使导航菜单变更为水平模式-->
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      @select="handleSelect"
      background-color="#C52626"
      text-color="#fff"

      active-text-color="#ffd04b">
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="2">课程介绍</el-menu-item>
      <el-menu-item index="3">教学团队</el-menu-item>
      <el-menu-item index="4">课程建设</el-menu-item>
      <el-menu-item index="5">课程资源</el-menu-item>
      <el-menu-item index="6">问题与答疑</el-menu-item>
      <el-menu-item index="7">课程研究</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "portalNavigation",
    data() {
      return {
        activeIndex: '2'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
  .el-menu{
  }
  .line{
    width:200px;
    display:inline-block ;

  }
</style>

